import React, { useState } from 'react'
import { Button, Input, Form, Toast, Picker } from 'react-vant'
import { WefRecharge } from '../sevice/WefService'
export default function Costs() {



    //form表单
    const [form] = Form.useForm()

    //清空表单
    const reset = () => {
        form.resetFields()
    }

    const onFinish = async (values) => {

        let { data } = await WefRecharge({
            billNo: values.billNo,
            paymentNo: values.paymentNo,
            paymentType: values.paymentType
        })
        
        if (data.code == 200) {
            Toast.loading({
                message: '充值成功...',
                forbidClick: true,
            })
            reset()
        }
    }



    return (
        <div>

            <div style={{ paddingTop: 30 }}>
                <p style={{ textAlign: 'center', paddingTop: 10, fontSize: 20 }}>充值</p>
                <Form
                    style={{ padding: 20 }}
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button round nativeType='submit' type='primary' block>
                                提交
                            </Button>
                        </div>
                    }>


                    <Form.Item
                        rules={[{ required: true, message: '请输入账单号' }]}
                        name='billNo'
                        label='账单号'
                    >
                        <Input placeholder='请输入账单号' />
                    </Form.Item>


                    <Form.Item
                        rules={[{ required: true, message: '请输入缴费编号' }]}
                        name='paymentNo'
                        label='缴费编号'
                    >
                        <Input placeholder='请输入缴费编号' />
                    </Form.Item>

                    <Form.Item
                        rules={[{ required: true, message: '请选择支付方式' }]}
                        isLink
                        name='paymentType'
                        label='支付方式'
                        trigger='onConfirm'
                        onClick={(_, action) => {
                            action.current?.open()
                        }}
                    >
                        <Picker
                            popup
                            columns={[
                                '电子支付',
                                '微信',
                                '支付宝']}>
                            {val => val || '请选择支付方式'}
                        </Picker>
                    </Form.Item>

                </Form>

            </div>

        </div>
    )
}
